<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
		<title>糖果盒</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="keywords" content="糖果盒,创世空,win8,卡片式布局" />
		
		<link type="text/css" rel="stylesheet" href="css/index4.css" />
		<link type="text/css" rel="stylesheet" href="css/popeWin.css" />
		<link type="text/css" rel="stylesheet" href="css/isotope.css" />
		<link type="text/css" rel="stylesheet" href="css/clock.css" />
		<!-- soundManager start-->
		<link rel="stylesheet" type="text/css" href="compents/music/360-player/flashblock/flashblock.css" />
		<link rel="stylesheet" type="text/css" href="compents/music/360-player/360player.css" />
		<link rel="stylesheet" type="text/css" href="compents/music/360-player/360player-visualization.css" />
		<!-- soundManager end-->
		
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
		<script src="http://api.map.baidu.com/api?v=1.2" type="text/javascript"></script>
		<script type="text/javascript" src="js/jquery.overlay.js"></script>
		<script type="text/javascript" src="js/popeWin.js"></script>
		<script type="text/javascript" src="js/jquery.flip.js"></script>
		<script type="text/javascript" src="js/jquery.isotope.js"></script>
		<script type="text/javascript" src="js/galleria-1.2.6.js"></script>
		<script type="text/javascript" src="js/jQuery.Json.js"></script>
		<script type="text/javascript" src="compents/weather/js/weather.js"></script>
		<script type="text/javascript" src="compents/news/js/home.js"></script>
		<script type="text/javascript" src="compents/comic/js/home.js"></script>
		<script type="text/javascript" src="compents/video/js/home.js"></script>
		<script type="text/javascript" src="compents/book/js/home.js"></script>
		<script type="text/javascript" src="compents/tvdrama/js/home.js"></script>
		<script type="text/javascript" src="compents/film/js/home.js"></script>
		<script type="text/javascript" src="compents/cartoon/js/home.js"></script>
		<script type="text/javascript" src="compents/resource/js/home.js"></script>
		
		
		<!-- soundManager start-->
		<script type="text/javascript" src="compents/music/360-player/script/berniecode-animator.js"></script>
		<script type="text/javascript" src="compents/music/360-player/script/soundmanager2.js"></script>
		<script type="text/javascript" src="compents/music/360-player/script/360player.js"></script>
		<!-- soundManager end-->
		
		<script type="text/javascript" src="compents/music/js/home.js"></script>
		<script type="text/javascript" src="js/index.js"></script>
		
		
		<script type="text/javascript">
			var winheight;
			var winwidth;
			var picisok = false;
			
			var layoutComponentId;
			document.onmousemove = mouseMove;
			
			var user;
			var cardOrder;
			
			

			$(document).ready(function() {
				refreash();
				$(window).resize(function() {
					refreash();
				});
				var $div = $('<div id="startloading" style="z-index:9999;position: fixed;top:45%;left:45%;"><div><img src="image/loading1.gif" /></div><div style="text-align:center;">精彩马上呈现</div></div>');
				showOL("msgdiv2",$div,1,"#b4dbec");
				
				
				initCoverWeather("wi_1","weatherImg","wi_2","wi_3");
				initDate();
				
				initClock();

				$("#toolcontent").hover(function(){
					$(this).removeClass("transparent_0");
					$(this).addClass("transparent_class");
				},function(){
					$(this).removeClass("transparent_class");
					$(this).addClass("transparent_0");
				});

				$("#toolcontent2").hover(function(){
					$(this).css("width",$("#toolimgdiv").css("width"));
					$("#toolimgdiv").show();
				},function(){
					$(this).css("width",60);
					$("#toolimgdiv").hide();
				});

				$(".element").bind("click",function(){
					
					showComponent(this.id);
				});
				$("#content").isotope({
					itemSelector: '.element',
					
					getSortData:{
						number: function( $elem ) {
							
							return parseInt( $elem.attr('relorder') );
						}					 
					},
					sortBy:"number"
				});

				$(".canDrag").draggable({
					containment:"#content",
					cursor: "move",
					cursorAt: { top: 5, left: 5 },
					helper: function( event ) {
						
						return $('<img src="image/cover/Others/White/MB_0001_pin.png" style="width:0px;height:0px;" />');
					},
					stop: function() {
						
						var oldrelorder = $(this).attr("relorder");
						var newrelorder = $("#"+layoutComponentId).attr("relorder");
						$(this).attr("relorder",newrelorder);
						$("#"+layoutComponentId).attr("relorder",oldrelorder);
						cardOrder[layoutComponentId]=oldrelorder;
						cardOrder[this.id]=newrelorder;
						changeCardOrder(cardOrder);
						
						$("#content,#content2").isotope("reloadItems");
						$("#content,#content2").isotope({
							sortBy:"number"
						});
						
						layoutComponentId=null;
					}
				});
				$(".canDrag").hover(function(){
					
					layoutComponentId=this.id;

				},function(){
					
				});
				
				$("#viewslider").draggable({
					axis: "x",
					containment:"#viewsliderbox",
					drag:function(){
						var posX = $(this).position().left;
						
						var conW = parseInt($("#content").css("width"));
						
						$("#content").css("left",0-posX*((conW-300)/389));


					},
					stop:function(){
						var posX = $(this).position().left;
						
						var conW = parseInt($("#content").css("width"));
						
						$("#content").css("left",0-posX*((conW-300)/389));


					}
				});

				
				
				
				$.getJSON("account_getUser.do",null,function(json){
					user = json;
					if(user.wallPaper!=null&&user.wallPaper!=""){
						var path = "url(wallpaper/"+user.wallPaper+".jpg)";
						modifyWallpaper(path);
						$("#tmppic").attr("src","wallpaper/"+user.wallPaper+".jpg");
					}else{
						$("#tmppic").attr("src","wallpaper/2.jpg");
					}
					if(user.photo!=null&&user.photo!=""){
						$("#headImg").attr("src",user.photo);
					}
					
					if(user.cardOrder!=null&&user.cardOrder!=""){
						cardOrder = jQuery.parseJSON(user.cardOrder);
						changeCurCardOrder(cardOrder);
						
					}else{
						
						cardOrder = jQuery.parseJSON(getCurCardOrder());
					}
					
					$("#content,#content2").isotope("reloadItems");
					$("#content,#content2").isotope({
						sortBy:"number"
					});
										
					$("div").disableSelection();
					
					$("#bodydiv").show("clip",null,500,null);
				});
				
				//开始加载模块js
				musicHome("component7");
				newsHome("component6");
				comicHome("component5");
				videoHome("component8");
				bookHome("component4");
				
				tvdramaHome("component20");
				filmHome("component21");
				cartoonHome("component22");
				resourceHome("component23");
				
				

			});

			
			
			

		</script>
	</head>

	<body class="body1">
		<div id="bodydiv" class="bodydiv" style="display:none;" >
			<div id="top" class="topcontent">
				<div id="headImgDiv" class="headImgDiv" style="padding-top:30px;float:left;">
					<img id="headImg" class="topImg" src="image/index/noimage.gif" title="工具栏" style="cursor:pointer;width:64px;height:64px;" onclick="showHeadInfo();" />
				</div>
				<div id="headInfo" style="padding-top:30px;padding-left:5px;float:left;display:none;">
					<img id="personInfoImg" class="topImg" src="image/cover/communications/white/MB_0010_tasks.png" title="修改信息" style="cursor:pointer;width:64px;height:64px;" onclick="modifyPersonInfo();"/>
					<img id="personLikeImg" class="topImg" src="image/cover/others/white/MB_0003_Favs1.png" title="偏好设置" style="cursor:pointer;width:64px;height:64px;" onclick="modifyPersonLike();"/>
					
					<img class="topImg" src="image/cover/system/white/MB_0024_LOCK.png" title="锁屏" style="cursor:pointer;width:64px;height:64px;" onclick="lockScreen();"/>
					<img class="topImg" src="image/cover/system/white/MB_0019_shut-down.png" title="退出" style="cursor:pointer;width:64px;height:64px;" onclick="closePow();"/>
				</div>
				
			</div>
			
			<div id="content" class="content">
				<div id="component1" class="element component canDrag" style="background:#305ba3 url(image/bg/10.png);" relorder="1"> 
					<div style="height:80%;width:100%;">
						<div class="clock">
						      <ul class="covertext">
						          <li id="hours"></li>
						          <li id="point">:</li>
						          <li id="min"></li>
						          <li id="point">:</li>
						          <li id="sec"></li>
						      </ul>
						</div>
					</div>
					<div id="dateweek" style="float:right;padding-right:10px;" class="covertext2">
						
					</div>
				</div>
				<div id="component2" class="element component canDrag" style="background:#6da2da url(image/bg/1.png)" relorder="2"> 
					<div style="float:left;width:100%;height:80%;">
						<div style="float:left;width:40%;text-align:center;height:100%;">
							<div style="height:15%;"></div>
							<div style="height:75%;">
								<img id="weatherImg" src="image/weather-icon/weather-icon-26.png" style="width:70%;height:95%;margin:0 auto;padding-top:5px;cursor:pointer;" />
							</div>
							
						</div>
						<div style="float:left;width:50%;color: #ffffff;padding-left:10px;height:80%;">
							<div style="height:25%;"></div>
							<div id="wi_1" style="padding-top:5px;height:25%;" class="covertext2"></div>
							<div id="wi_2" style="padding-top:5px;height:25%;" class="covertext2"></div>
							<div id="wi_3" style="padding-top:5px;height:25%;" class="covertext2"></div>
						</div>
					</div>
					<div style="float:left;width:100%;height:20%;">
						<div style="float:left;padding-left:10px;" class="covertext2">
							天气
						</div>
						<div style="float:right;color: #ffffff;padding-right:10px;font-size: 0.9em;">
							<div id="wi_4" style="padding-top:5px;font-size: 0.9em;height:33%;"></div>
						</div>
					</div>
					
				</div>
				
				
				<div id="component4" class="element component covertext canDrag" style="background:#a5cfb1 url(image/bg/17.png)" relorder="3"> 
					<img src="image/cover/others/white/MB_0007_book.png" class="coverimg" /> 小说
				</div>
				<div id="component5" class="element component covertext canDrag" style="background:#fa7f83 url(image/bg/5.png)" relorder="4"> 
					<img src="image/cover/media/white/mh.png" class="coverimg"/> 漫画
				</div>
				<div class="element component4" style="cursor:move;" relorder="5"> 
					
				</div>
				
				<div id="component6" class="element component3 covertext canDrag" style="background:#b1b1b1 url(image/bg/14.png)" relorder="6"> 
					<img src="image/cover/media/white/MB_0018_viewer.png" class="coverimg" /> 新闻
				</div>
				<div id="component7" class="element component covertext canDrag" style="background:#4b77f0 url(image/bg/6.png)" relorder="7"> 
					<img src="image/cover/media/white/MB_0014_iTunes.png" class="coverimg" /> 音乐
				</div>
				<div id="component8" class="element component covertext canDrag" style="background:#58b640 url(image/bg/18.png)" relorder="8"> 
					<img src="image/cover/media/white/MB_0024_YT2.png" class="coverimg" /> 视频
				</div>
				<div id="component9" class="element component2 covertext canDrag" style="background:#60381b url(image/bg/9.png)" relorder="9"> 
					<div style="height:80%;width:100%;">
						<img src="image/cover/communications/white/MB_0018_note1.png" class="coverimg" style="height:75%;"/> 
					</div>
					<div  style="float:right;padding-right:10px;" class="covertext2">
						便签
					</div>
				</div>
				<div id="component10" class="element component2 covertext canDrag" style="background:#305ba3 url(image/bg/4.png)" relorder="10" > 
					<div style="height:80%;width:100%;">
						<img src="image/cover/navigation/white/MB_0005_POI.png" class="coverimg" style="height:75%;"/> 
					</div>
					<div  style="float:right;padding-right:10px;" class="covertext2">
						周边
					</div>
				</div>
				<div id="component11" class="element component2 covertext canDrag" style="background:#6da2da url(image/bg/3.png)"  relorder="11"> 
					<div style="height:80%;width:100%;">
						<img src="image/cover/others/white/MB_0006_calculator.png" class="coverimg" style="height:75%;"/> 
					</div>
					<div  style="float:right;padding-right:10px;" class="covertext2">
						计算器
					</div>
				</div>
				<div id="component12" class="element component2 covertext canDrag" style="background:#de8f13 url(image/bg/8.png)" relorder="12"> 
					<div style="height:80%;width:100%;">
						<img src="image/cover/others/white/car.png" class="coverimg" style="height:75%;"/> 
					</div>
					<div  style="float:right;padding-right:10px;" class="covertext2">
						快递
					</div>
				</div>
				<div id="component13" class="element component2 covertext canDrag" style="background:#de8f13 url(image/bg/12.png)" relorder="13"> 
					<div style="height:80%;width:100%;">
						<img src="image/cover/others/white/stock.png" class="coverimg" style="height:75%;"/> 
					</div>
					<div  style="float:right;padding-right:10px;" class="covertext2">
						股票
					</div>
				</div>
				<div id="component14" class="element component2 covertext canDrag" style="background:#58b640 url(image/bg/5.png)" relorder="14"> 
					<div style="height:80%;width:100%;">
						<img src="image/cover/others/white/MB_0018_Translate.png" class="coverimg" style="height:75%;"/> 
					</div>
					<div  style="float:right;padding-right:10px;" class="covertext2">
						翻译
					</div>
				</div>
				<div id="component15" class="element component2 covertext canDrag" style="background:#58b640 url(image/bg/4.png)" relorder="15"> 
					<div style="height:80%;width:100%;">
						<img src="image/cover/media/white/MB_0010_radio.png" class="coverimg" style="height:75%;"/> 
					</div>
					<div  style="float:right;padding-right:10px;" class="covertext2">
						电台
					</div>
				</div>
				<div id="component16" class="element component2 covertext canDrag" style="background:#58b640 url(image/bg/3.png)" relorder="16"> 
					<div style="height:80%;width:100%;">
						<img src="image/cover/media/white/MB_0001_TV.png" class="coverimg" style="height:75%;"/> 
					</div>
					<div  style="float:right;padding-right:10px;" class="covertext2">
						电视台
					</div>
				</div>
				<div id="component17" class="element component2 covertext canDrag" style="background:#58b640 url(image/bg/12.png)" relorder="17"> 
					<div style="height:80%;width:100%;">
						<img src="image/cover/media/white/MB_0024_TV.png" class="coverimg" style="height:75%;"/> 
					</div>
					<div  style="float:right;padding-right:10px;" class="covertext2">
						MTV
					</div>
				</div>
				<div id="component18" class="element component2 covertext canDrag" style="background:#58b640 url(image/bg/13.png)" relorder="18"> 
					<div style="height:80%;width:100%;">
						<img src="image/cover/others/white/MB_0000_Llama.png" class="coverimg" style="height:75%;"/> 
					</div>
					<div  style="float:right;padding-right:10px;" class="covertext2">
						笑话大全
					</div>
				</div>
				<div id="component19" class="element component covertext canDrag" style="background:#b1b1b1 url(image/bg/9.png)" relorder="6"> 
					<img src="image/cover/media/white/MB_0011_macro.png" class="coverimg" /> 图集
				</div>
				<div id="component20" class="element component covertext canDrag" style="background:#b1b1b1 url(image/bg/8.png)" relorder="6"> 
					<img src="image/cover/media/white/MB_0012_landskape.png" class="coverimg" /> 电视剧
				</div>
				<div id="component21" class="element component covertext canDrag" style="background:#b1b1b1 url(image/bg/12.png)" relorder="6"> 
					<img src="image/cover/media/white/MB_0007_VideoRecorder.png" class="coverimg" /> 电影
				</div>
				<div id="component22" class="element component covertext canDrag" style="background:#b1b1b1 url(image/bg/7.png)" relorder="6"> 
					<img src="image/cover/media/white/MB_0008_touch.png" class="coverimg" /> 动画片
				</div>
				<div id="component23" class="element component covertext canDrag" style="background:#b1b1b1 url(image/bg/5.png)" relorder="6"> 
					<img src="image/cover/network/white/MS_0000s_0014_net.png" class="coverimg" /> 我的资源
				</div>
			
			</div>
			
			
			<div id="toolcontent" class="toolcontent transparent_0">
				<div style="height:33%;"></div>
				<div style="height:66%;">
					<img title="搜索" src="image/cover/network/white/MS_0000s_0036_search.png" style="width:60px;height:60px;cursor:pointer;float:left;" /> 
					<img title="主页" src="image/cover/system/white/MB_0023_home2.png" style="width:60px;height:60px;cursor:pointer;float:left;padding-top:20px;" onclick="showHome();" /> 
					<img title="配置" src="image/cover/system/white/MB_0020_sett-big.png" style="width:60px;height:60px;cursor:pointer;float:left;padding-top:20px;" /> 
					<img title="帮助" src="image/cover/system/white/MB_0018_help.png" style="width:60px;height:60px;cursor:pointer;float:left;padding-top:20px;" /> 
					
				</div>
			</div>
			<div id="toolcontent2" class="toolcontent2">
				<div style="height:25%;"></div>
				<div style="height:66%;" id="toolimgdiv" class="toolimgdiv">
					
					
				</div>
			</div>
			<div id="bottomtoolcontent" class="bottomtoolcontent">
				<div style="margin:0 auto;position: fixed;bottom:10%;left:40%;">
					<img src="image/slider2.png" style="width:100%;height:10px;padding-bottom:0px;" /> 
				</div>
				<div id="viewsliderbox" style="margin:0 auto;position: fixed;bottom:10%;left:40%;width:389px;text-align:left;">
					<img id="viewslider" src="image/slider1.png" style="width:11px;height:11px;cursor:pointer;" /> 
				</div>
			</div>
			<div id="topMsgDiv" class="topMsgDiv">
				布局模式
			</div>
			<div id="msgdiv" sytle="display:none;"></div>
			<div id="msgdiv2" sytle="display:none;"></div>
			<div id="tmppicdiv" sytle="display:none;"><img onload="pageOK();" id="tmppic" src="" /><img src="image/lockbg.jpg" /></div>
		</div>
	</body>
</html>